<template>
    <div id="test">

        <div style="margin-top:15px">
            <!--<el-input placeholder="请输入内容" v-model="criteria">
                <el-select v-model="select" slot="prepend" placeholder="请选择">
                    <el-option label="id" value="1"></el-option>
                    <el-option label="name" value="2"></el-option>
                </el-select>
                <el-button slot="append" icon="el-icon-search" v-on:click="search"></el-button>
            </el-input>-->


            <el-row :gutter="20">
                <el-col :span="8"><div class="grid-content bg-purple">

                    <el-date-picker  v-model="s_date" type="daterange" value-format="yyyy-MM-dd" align="right" unlink-panels  range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions2">
                    </el-date-picker>
                </div></el-col>
                <el-col :span="16"><div class="grid-content bg-purple">
                    <el-input placeholder="请输入内容" v-model="s_text" class="input-with-select">
                        <el-select v-model="s_selType" slot="prepend" placeholder="请选择" style="width:80px">
                            <el-option label="id" value="id"></el-option>
                            <el-option label="姓名" value="name"></el-option>
                        </el-select>
                        <el-button slot="append" icon="el-icon-search" v-on:click="search"></el-button>
                    </el-input>
                </div></el-col>

            </el-row>

            <el-table
                    v-loading="loading"
                    stripe
                    ref="testTable"
                    :data="tableData"
                    size="small"
                    style="width:100%"
                    border
                    :default-sort = "{prop: 'id', order: 'ascending'}"
                    @selection-change="handleSelectionChange"
                    @row-click="handleclick"
                    :row-class-name = "tableRowClassName"
            >
                <!--<el-table-column  type="selection"></el-table-column>-->
                <el-table-column
                        fixed="left"
                        width="100"
                        prop="id"
                        label="Id"
                        sortable
                        show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="name" label="姓名"  width="100" sortable> </el-table-column>
                <el-table-column prop="phone" label="手机号" width="150" sortable></el-table-column>
                <el-table-column prop="address" label="地址" width="250" sortable></el-table-column>
                <el-table-column prop="ip" label="ip地址" width="150" sortable></el-table-column>
                <el-table-column prop="time" label="方便时间" width="100" sortable></el-table-column>
                <el-table-column prop="pubtime" label="创建时间" width="150" sortable></el-table-column>
                <el-table-column label="操作" width="150" fixed="right">
                    <template slot-scope="scope">
                        <el-button
                                size="small"
                                type="primary"
                        >编辑</el-button>
                        <el-button
                                size="small"
                                type="danger"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div align="center">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="pagesize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="totalCount">
                </el-pagination>
            </div>
        </div>

    </div>


</template>


<script>
    export default {
        name: 'table1',
        data() {
            return {
                //表格当前页数据
                tableData: [],
                //多选数组
                multipleSelection: [],
                //下拉菜单选项
                select: '',
                //默认每页数据量
                pagesize: 10,
                //默认高亮行数据id
                highlightId: -1,
                //当前页码
                currentPage: 1,
                //查询的页码
                start: 1,
                //默认数据总数
                totalCount: 1000,
                pickerOptions2: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                s_date: '',
                s_text:'',
                s_selType:'',
            }//return
        },//data
        methods: {
            //从服务器读取数据
            loadData: function(){
                //text,date,type, pageNum, pageSize
                //this.s_text,this.s_date,this.s_selType, this.currentPage, this.pagesize
                let params =new URLSearchParams();
                alert("pageNum:"+this.currentPage+" pageSize"+this.pagesize);
                params.append("text",this.s_text);
                params.append("date",this.s_date);
                params.append("type",this.s_selType);
                params.append("pageNum",this.currentPage);
                params.append("pageSize",this.pagesize);



                this.$axios.post('demo/getListByPage',params).then((res)=> {
                    alert(res.data.number);
                    this.tableData = res.data.pagesdata;
                    this.totalCount = res.data.number;
                    console.log(res);
                }).catch((error)=> {
                    console.log(error);
                });

                /*this.$axios({
                    method: 'post',
                    url: '/info/user/getListByPage',
                    data: {
                        params
                        //parameter:criteria,pageNum:pageNum, pageSize:pageSize
                    }
                }).then(function(res){
                    alert(res.data.result);

                    this.tableData = res.data.infoList;
                    //this.totalCount = res.data.number;

                }).catch(function(err){
                    console.log(err)
                });*/


            },

            //多选响应
            handleSelectionChange: function(val) {
                this.multipleSelection = val;
            },

            //点击行响应
            handleclick: function(row, event, column){
                this.highlightId = row.id;
            },

            //搜索
            search: function(){

                this.loadData();
            },


            //改变当前点击的行的class，高亮当前行
            tableRowClassName: function(row, index){
                if(row.id == this.highlightId)
                {
                    return 'info-row';
                }
            },

            //每页显示数据量变更
            handleSizeChange: function(val) {
                this.pagesize = val;
                this.loadData();
            },

            //页码变更
            handleCurrentChange: function(val) {
                this.currentPage = val;
                this.loadData();
            },

        },mounted(){
            this.loadData();

        },
    };


</script>

